@import "./common";
@keyframes move {
    0%{
        transform: translateX(0);
    }
    25%{
        transform: translateX(0);   //多加一个好看一点
    }
    50%{
        transform: translateX(-100%);
    }
    100%{
        transform: translateX(-200%);
    }
}
@keyframes change_color1{
    0%{
        background-color: #2a2a2a;
    }
    25%{
        background-color: #2a2a2a;
    }
    50%{
        background-color: #ffffff;
    }
    100%{
        background-color: #ffffff;
    }
}
@keyframes change_color2{
    0%{
        background-color: #ffffff;
    }
    25%{
        background-color: #ffffff;
    }
    50%{
        background-color: #2a2a2a;
    }
    100%{
        background-color: #ffffff;
    }
}
@keyframes change_color3{
    0%{
        background-color: #ffffff;
    }
    25%{
        background-color: #ffffff;
    }
    50%{
        background-color: #ffffff;
    }
    100%{
        background-color: #2a2a2a;;
    }
}
.main{
    // 轮播图部分
    .banner{
        position: relative;
        overflow: hidden;
        height: 370px;
        &:hover .slide{
            animation-play-state: paused;
        }
        &:hover .dots label{
            animation-play-state: paused;
        }
        img{
            width: 100%;
            height: 370px;
        }
        .slide{
            width: 100%;
            height: 370px;
            position:absolute;
            transition: all 0.5s ease-in-out;
            animation: move 4s infinite;        // 轮播图动画效果
            &:nth-of-type(2){
                background-image: url(../images/game/angle.jpg);
                background-size: cover;
                left: 100%;
            }
            &:nth-of-type(3){
                background-image: url(../images/game/waner.jpg);
                background-size: cover;
                left: 200%;
            }
        }
        input[type="radio"]{
            position: relative;
            z-index: 100;
            display: none;
            &:nth-of-type(1):checked~.slide{
                transform:translateX(0)           //通过兄弟选择器来实现点击效果
            }
            &:nth-of-type(2):checked~.slide{
                transform:translateX(-100%)
            }
            &:nth-of-type(3):checked~.slide{
                transform:translateX(-200%)
            }
            &:nth-of-type(1):checked~.dots label:nth-of-type(1) {
                background-color: #2a2a2a;
                opacity: 0.8;
            }
            &:nth-of-type(2):checked~.dots label:nth-of-type(2) {
                background-color: #2a2a2a;
                opacity: 0.8;
            }
            &:nth-of-type(3):checked~.dots label:nth-of-type(3) {
                background-color: #2a2a2a;
                opacity: 0.8;
            }
        }
        .dots{
            position: absolute;
            width: 100%;
            bottom: 15px;
            text-align: center;
            label{
                display: inline-block;
                width: 10px;
                height: 10px;
                border-radius:50%;
                background-color: #fff;
                border: 1px solid #fff;
                margin: 0 5px;
                &:nth-of-type(1){
                    animation: change_color1 4s infinite;
                }
                &:nth-of-type(2){
                    animation: change_color2 4s infinite;   
                }
                &:nth-of-type(3){
                    animation: change_color3 4s infinite;   
                }
            }
        }
    }
    // 游戏列表
    .game_list{
        // 猎刃2
        .lieren{
            margin-top: 35px;
            padding-bottom: 62px;
            .left{
                .center{
                    position: relative;
                    width: 351px;
                    .hot{
                        width: 40px;
                        height: 100px;
                        line-height: 50px;
                        position: absolute;
                        top: -35px;
                        background-image: url(../images/game/图层55.jpg);
                        writing-mode: sideways-rl;
                        text-align: center;
                        span{
                            margin-top: 25px;
                            display: inline-block;
                            width: 20px;
                            font-size: 20px;
                            line-height: 24px;
                            color: #ffffff;
                        }
                    }
                    img{
                        width: 351px;
                        margin-left: -15px;
                    }
                }
            }
            .right{
                text-align: right;
                padding-left: 20px;
                h2{
                    @include center;
                    font-size: 30px;
                }
                p{
                    @include center;
                    margin-top:13px;
                    font-size: 12px;
                    line-height: 30px;
                    font-size: #898989;
                }
                >div{
                    div{
                        padding-top: 30px;
                    }
                }
            }
        }
        // 上吧主公
        .master{
            padding-bottom: 103px;
            .left{
                h2{
                    @include center;
                    font-size: 30px;
                }
                p{
                    @include center;
                    margin-top:13px;
                    font-size: 12px;
                    line-height: 30px;
                    font-size: #898989;
                }
                >div{
                    div{
                        margin-top: 30px;
                    }
                }
            }
            .right{
                margin-top: 28px;
            }
        }
        // 更多推荐
        .more{
            padding-bottom:52px;
            h2{
                font-size: 36px;
                @include center;
                padding-bottom: 39px;
            }
            .row{
                @media (max-width:768px){
                    display: flex;
                    flex-direction: column;
                    align-items: center;
                }
                .img{
                    position: relative;
                    img{
                        width: 303px;
                    }
                    &:hover p{
                        visibility: visible;
                    }
                    p{
                        display: block;
                        width: 303px;
                        height: 133px;
                        padding: 15px;
                        background-color: rgba(69,103,110,0.5);
                        position: absolute;
                        top: 0;
                        left: 0;
                        color: #eceaea;
                        visibility: hidden;
                    }
                }
                >div{
                    margin-bottom: 40px;
                    div{
                        width: 303px;
                        height: 133px;
                    }
                    a{
                        display: inline-block;
                        width: 303px;
                        text-align: center;
                        font-size: 12px;
                        margin-top:12px;
                        color: #2a2a2a;
                    }
                }
            }
        }
    }
}